import React from 'react';
import {Button, Form, Input, Checkbox} from 'antd';
import {DownOutlined} from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import {isImg} from './utils';

class LoginBanner extends React.PureComponent {

    render() {
        const layout = {
            toplevel: { span: 20},
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        const tailLayout = {
            wrapperCol: { offset: 4, span: 16 },
        };



        const {...currentProps} = this.props;
        const {dataSource} = currentProps;
        delete currentProps.dataSource;
        return (
            <div {...currentProps} {...dataSource.wrapper}>
                <QueueAnim
                    key="QueueAnim"
                    type={['top', 'top']}
                    delay={200}
                    {...dataSource.textWrapper}
                >
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={{ remember: true }}
                    >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button ghost key="button" {...dataSource.button}>
                                {dataSource.button.children}
                            </Button>
                        </Form.Item>
                    </Form>



                </QueueAnim>
            </div>
        );
    }
}

export default LoginBanner;
